<template>
  <div class="wrapper">
    <!-- 头部区域 -->
    <div class="title-wrapper">
      <div class="title">预约渠道数据统计</div>
      <img class="title-icon" src="../images/dataScreen-title.png" />
    </div>
    <div class="content-wrapper">
      <div class="echarts" ref="subRef"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
let subRef = ref()
onMounted(() => {
  subEcharts()
})
const subEcharts = () => {
  const PIE_DATA = [
    { name: "飞猪", value: 10, proportion: "20%" },
    { name: "去哪旅游", value: 25, proportion: "50%" },
    { name: "携程旅行", value: 15, proportion: "30%" }
  ];

  const HIDDEN_OPTIONS = {
    normal: { show: false },
    emphasis: { show: false }
  };

  const BASE_PIE_CONFIG = {
    center: ["40%", "50%"],
    type: "pie",
    label: HIDDEN_OPTIONS,
    labelLine: HIDDEN_OPTIONS,
  };
  const chart = echarts.init(subRef.value)
  const option = {
    // backgroundColor: "#000",
    title: {
      text: "7789",
      subtext: "预约",
      textStyle: { color: "#FDC200", fontSize: 30 },
      subtextStyle: { fontSize: 20, color: "#fff" },
      textAlign: "center",
      textVerticalAlign: "middle",
      x: "60%",
      y: "46%"
    },
    legend: {
      left: 30,
      top: "center",
      orient: "vertical",
      itemGap: 20,
      textStyle: { color: "#f2f2f2" },
      // formatter: (params:any) => {
      //   const item = PIE_DATA.find(i => i.name === params);
      //   return `${params}\n${item.value}   ${item.proportion}`;
      // },
      data: PIE_DATA
    },
    series: [
      // 主饼图
      {
        ...BASE_PIE_CONFIG,
        color: ["#FE3F3B", "#FFF93C", "#FF9200"],
        radius: ["50%", "60%"],
         center: ["60%", "50%"],
        padAngle: 4,

        data: PIE_DATA
      },
      // 内边框2
      {
        ...BASE_PIE_CONFIG,
        silent: true,
        radius: ["33%", "41%"],
         center: ["60%", "50%"],
        data: [{ value: 1, itemStyle: { color: "#0C3D6B" } }]
      },
      // 刻度盘
      {
        name: "刻度盘",
        type: "gauge",
        min: 0,
        max: 100,
        radius: "100%",
        center: ["60%", "50%"],
        startAngle: 0,
        endAngle: 360,
        axisLine: { show: false },
        axisTick: {
          show: true,
          lineStyle: { color: "#093B5A", width: 4 },
          length: 26,
          splitNumber: 20
        },
        silent: true,
        splitLine: { show: false },
        axisLabel: { show: false },
        pointer: { show: false }
      }
    ]
  };

  chart.setOption(option)

}
</script>

<style scoped lang="scss">
.wrapper {
  margin-top: 24px;
  width: 100%;
  height: 300px;
  background: url(../images/dataScreen-main-lc.png) no-repeat;
  background-size: cover;

  .title-wrapper {
    padding-left: 10px;

    .title {
      color: white;
      font-size: 20px;
      margin-bottom: 2px;
    }

    .title-icon {
      width: 50px;
    }
  }

  .content-wrapper {
    margin-top: 18px;

    .echarts {
      width: 100%;
      height: 242px;
      // background: #bfc;
    }
  }
}
</style>